<template>
  <view class="content">
    <u-swiper
      :list="detail.images"
      indicator
      height="375"
      indicatorMode="line"
      circular
    ></u-swiper>
    <view class="list-item">
      <text class="money"
        >¥
        <text class="moneyNum">{{ detail.price }}</text>
        /吨
      </text>
      <view class="tag fwrap">
        <u-tag
          size="mini"
          v-if="detail.zhenpin == 1"
          text="真品"
          color="#FFF"
          bg-color="#000"
          icon="integral"
        ></u-tag>
        <u-tag
          size="mini"
          text="一手"
          v-if="detail.yihsou == 1"
          color="#0192FC"
          border-color="#0192FC"
          bg-color="#FFF"
          plain
          icon="integral"
        ></u-tag>
        <p>{{ detail.name }}</p>
      </view>
      <view class="price fbetween">
        <text class="num">月{{ detail.stock }}吨</text>
        <text class="num flex">
          <u-icon name="share-square"></u-icon>
          分享
        </text>
      </view>
    </view>
    <u-tabs :list="list1" @click="click"></u-tabs>
    <view style="padding: 30rpx">
      <u-parse :content="html"></u-parse>
    </view>
    <view style="padding-bottom: 500rpx"></view>
    <CommonTabBar class="tabBar">
      <template #content-spread>
        <view class="save">
          <u-icon name="star"></u-icon>
          收藏
        </view>
      </template>
      <template #self-adaptation>
        <view class="fcc" style="width: 100%; gap: 24rpx">
          <u-button
            style="width: 100rpx"
            icon="chat"
            @click="go"
            iconColor="#fff"
            color="#FF5A31"
            shape="circle"
            >联系客服
          </u-button>
          <u-button
            v-if="detail.specifications === 1"
            @click="show = true"
            iconColor="#fff"
            color="#016FDD"
            shape="circle"
            >立即购买
          </u-button>
          <u-button
            v-else
            icon="phone"
            @click="go"
            iconColor="#fff"
            color="#016FDD"
            shape="circle"
            >联系商家
          </u-button>

          <u-popup :show="show" @close="close" @open="open" :round="14">
            <view class="popup">
              <view class="info">
                <img src="@/static/images/delete/st.jpg" />
                <view class="name">
                  {{ detail.name }}
                  <view
                    >¥
                    <text>{{ detail.price }}</text>
                  </view>
                </view>
              </view>
              <view class="popup-item" v-for="(item, index) in detail.sku">
                <p>{{ item.name }}</p>
                <view class="dx">
                  <view
                    class="u-page__tag-item"
                    v-for="(itemC, indexC) in item.item"
                    :key="indexC"
                  >
                    <u-tag
                      :text="`${itemC.name}`"
                      :plain="!itemC.checked"
                      :name="itemC.id"
                      @click="radioClick(itemC.id, index, indexC)"
                    >
                    </u-tag>
                  </view>
                </view>
              </view>

              <view class="btn">
                <u-button
                  type="primary"
                  color="#016FDD"
                  shape="circle"
                  @click="sure"
                  >确定
                </u-button>
              </view>
            </view>
          </u-popup>
        </view>
      </template>
    </CommonTabBar>
    <u-picker
      :show="shows"
      :columns="columns"
      @confirm="confirm"
      @cancel="shows = false"
    ></u-picker>
  </view>
</template>
<script>
import CommonTabBar from "@/components/CommonTabBar/index.vue";
import CjSlider from "@/components/jxs-slider.vue";
import TagComp from "@/components/TagComp.vue";

export default {
  name: "index",
  components: {
    TagComp,
    CjSlider,
    CommonTabBar,
  },
  onLoad(options) {
    //todo   options.type =  0   带规格 +立即购买  1  /不带规格+联系商家
  },
  data() {
    return {
      radios: [
        {
          checked: true,
        },
        {
          checked: false,
        },
        {
          checked: false,
        },
      ],
      shows: false,
      columns: [["1吨", "2吨"]],
      type: 0,
      gg: "",
      list3: [require("@/static/images/delete/st.jpg")],
      show: false,
      list1: [
        {
          name: "商品详情",
        },
        {
          name: "质检报告",
        },
      ],
      active: 0,
      tagList: ["1吨", "2吨", "10吨", "20吨"],
      id: 0,
      list: [],
      detail: {},
      html: "",
      sku: "210,213",
    };
  },
  onLoad(e) {
    if (e.id) {
      this.id = e.id;
    }
    this.getdetail();
  },
  methods: {
    radioClick(name, index, index1) {
      // console.log(name);
      // console.log(this.detail.sku[index].item[index1]);
      this.detail.sku.map((item, indexC) => {
        item.item.map((itemA, indexA) => {
          this.detail.sku[index].item[indexA]["checked"] = false;
        });
      });
      this.detail.sku[index].item[index1]["checked"] =
        this.detail.sku[index].item[index1].id == name ? true : false;
      //
      // console.log(name);
    },
    confirm(data) {
      // console.log(data)
      this.gg = data.value[0];
      this.shows = false;
    },
    getdetail() {
      var that = this;
      this.$.ajax(
        1,
        "POST",
        "/index/getgoodsdetail",
        {
          id: this.id,
        },
        (res) => {
          that.detail = res.data.detail;
          that.html = res.data.detail.content;
          console.log(that.detail.sku);
        }
      );
    },
    click(e) {
      if (e.index == 0) {
        this.html = this.detail.content;
      } else {
        this.html = this.detail.baogao;
      }
    },
    go() {
      var that = this;
      uni.makePhoneCall({
        phoneNumber: that.detail.phone,
      });
    },
    close() {
      this.show = false;
    },
    sure() {
      // this.show = false;、
	  var sku = [];
	  this.detail.sku.forEach((item,index)=>{
		  item.item.forEach((items,indexs)=>{
			  if(items.checked == true){
				  sku.push(items.id)
			  }
			  
		  })
	  })
      var that = this;
      this.$.ajax(
        1,
        "POST",
        "/user/checksku",
        {
          id: this.id,
          sku: sku.join(','),
        },
        (res) => {
          if (res.code == 1) {
            that.$.ajax(
              1,
              "POST",
              "/user/createorder",
              {
                product_id: this.id,
                sku: res.data,
                num: 1,
              },
              (res) => {
                uni.navigateTo({
                  url:
                    "/pages/person/orderDetails?order_id=" + res.data.order_id,
                });
                that.show = false;
              }
            );
          } else {
            that.$.ti_shi(res.msg);
          }
        }
      );
      //
      //
    },
    open() {},
    changeGg(i) {
      console.log(i);
      this.active = i;
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
.dx {
  display: flex;
  gap: 20rpx;
}
.moneyNum {
  font-weight: 700;
  font-size: 48rpx;
}
.page {
  background-color: #fff;
}

.content {
  background-color: #fff;

  .popup {
    color: #131313;
    min-height: 518rpx;

    .info {
      display: flex;
      align-items: center;
      gap: 20rpx;
      font-size: 26rpx;
      font-weight: 500;
      padding: 40rpx;
      border-bottom: 1rpx solid #f4f4f4;

      .name {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        text {
          font-weight: 700;
          font-size: 38rpx;
        }
      }

      img {
        width: 126rpx;
        height: 126rpx;
        border-radius: 16rpx;
      }
    }

    .btn {
      margin: 40rpx;
    }

    .popup-item {
      padding: 40rpx;

      p {
        font-size: 28rpx;
        font-weight: 400;
        margin-bottom: 40rpx;
      }
    }
  }

  .tabBar {
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 10rpx 0;
    z-index: 999;
    .save {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10rpx;
      font-size: 24rpx;
      margin-right: 62rpx;
      margin-left: 18rpx;
    }
  }
}

.list-item {
  display: inline-block;
  color: #131313;
  padding: 20rpx;
  width: 100%;
  .tag {
    display: flex;
    gap: 20rpx;
    margin: 20rpx 0;

    p {
      font-size: 32rpx;
      font-weight: 500;
      //flex: 1;
      white-space: normal;
      word-break: break-all;
      width: 100%;
    }
  }

  .price {
    margin: 20rpx 0;
    padding-bottom: 40rpx;
    border-bottom: 1rpx solid #e5e5e5;
  }

  .num {
    color: #686868;
    font-size: 24rpx;
    font-weight: 400;
  }

  img {
    width: 100%;
    height: 330rpx;
  }
}
</style>

